// 相当于vue中的 app.vue
import logo from './logo.svg'; // 引入图片的方式
import './App.css'; // 引入css的方式
// 引入组件
import Com1 from "./components/Com1";
import Com2 from "./components/Com2";


let name = 'Tom';
let arr1 = [1,2,3,4];
let hasLogin = false;
// 函数式组件
function App() {
  return (
    // jsx语法 是对于js的增强，允许js和html代码在同一行混写。这样可以给html增加逻辑
    // vue通过指令使得html有逻辑，react采用jsx语法
    // 在jsx中class 要写成 className 为了区分js中的class
    // 如何区分jsx代码中的js和html？< 表示html开始，> 表示html结束；{ 表示js开始，} 表示js结束
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p className={hasLogin?'active': ''}>
          {name.length}----{arr1[0]}
        </p>
        <Com1></Com1>
        <Com2 />
        {
          // 生成循环结构时，用map
          arr1.map(item => {
            return (
              <button key={item}>{item}</button>
            )
          })
        }
        {
          // 生成条件判断时，需要的符号比较多，按照逻辑顺序写
          (function() {
            if(hasLogin) {
              return (
                <p>此时，hasLogin的值为真</p>
              )
            }else {
              return (
                <h1>hasLogin为false</h1>
              )
            }
          })()
        }
      </header>
    </div>
  );
}

export default App;
